<template>
	<view class="notice-wrap">
		<uni-icons color="#9b9b9b" type="sound" size="22" />
		<view class="notice-content">
			<swiper class="notice-content__swiper" :circular="true" vertical autoplay interval="6000">
				<swiper-item v-for="(item,index) in noticeList" :key="index" class="item"  @click="itemClick(item)">
					<text class="notice" :style="{color:colors}">{{item.title}}</text>					
				</swiper-item>
			</swiper>
			<text class="notice-content__btn" :style="{color:colors}">点击查看</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			colors: {
				type: String,
				default: '#9b9b9b'
			},
			noticeList: {
				type: Array
			}
		},
		methods: {
			itemClick(item) {
				this.$emit('click', item);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.notice-wrap {		
		height: 50upx;
		line-height: 50upx;
		margin: 0 3%;
		margin-top: 15upx;
		padding: 0 10upx;
		background: #f8f8f8;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.notice-content {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10rpx;
	}

	.notice-content .notice-content__swiper {
		flex: 1;
		height: 50upx;
	}

	.notice-content__swiper .item {
		display: flex;
		align-items: center;
		height: 80upx;
		justify-content: space-between;
	}
	
	.notice-content__swiper .notice {
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
	}
	
	.notice-content__btn {
		font-size: 24upx;
		color: #666;
	}
</style>